<template>
  <div class="container">
    <div class="demo-image__preview box" v-for="(item, index) in list" :key="index">
      <el-image
        style="width: 100px; height: 100px"
        :src="item.src"
        :preview-src-list="[item.src]"
        fit="cover"
      >
      </el-image>
      <div class="div1">{{item.name}}</div>
      <div class="div2">{{item.createTime}}</div>
    </div>
  </div>
</template>

<script>
import {Api} from "../../../api/api.js";
import { ref, onMounted } from "vue";
export default {
  name: "",
  setup() {
    let list = ref([]);
    function getImage() {
      Api.getImage({}).then((res) => {
        list.value = res.data;
      });
    }
    onMounted(() => {
      getImage();
    });
    return {
      list,
    };
  },
};
</script>

<style lang='less' scoped>
.container{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    .box{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding:10px;
        &:hover{
            box-shadow: 0px 0px 10px 1px red;
            text-shadow: 0px 0px 2px red;
        }
        .div1{
            font-size: 14px;
            font-family: "kaiti";
        }
        .div2{
            font-size: 10px;
            font-family: "kaiti";
        }
    }
}
</style>